<template>
  <div class="orderDetails">
    <div class="orderTop" :class="orderBg">
      <div class="orderStatus">
        <van-icon :name="iconVal" />
        <span>{{ orderDetails.state_text }}</span>
      </div>
    </div>
    <div class="addressBox">
      <div class="addressIcon">
        <van-icon name="location" color="#999" size="20px" />
      </div>
      <div class="address">
        <span
          >{{ address.name }}<em>{{ address.phone }}</em></span
        >
        <span class="sp1">{{ address.detail }}</span>
      </div>
    </div>
    <div class="box">
      <!-- <div class="box1">
        <div class="title">订单编号：{{ orderDetails.order_no }}</div>
      </div> -->
      <div class="box2">
        <div class="boxImg">
          <img :src="imgDate.url" alt="" />
        </div>
        <div class="boxText">
          <p class="p1">{{ orderDetails.goods_name }}</p>
          <p class="p2">
            {{ orderDetails.selling_point }}
          </p>
          <p class="p3">
            实付：<span> ￥{{ orderDetails.order_price }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="detailsData">
      <p v-if="orderDetails.order_no">
        <span>订单编号：</span><em>{{ orderDetails.order_no }}</em>
      </p>

      <p v-if="orderDetails.sale_status == 20">
        <span>寄售时间：</span><em>{{ orderDetails.sale_time }}</em>
      </p>
      <p v-if="orderDetails.sale_status == 20">
        <span>寄售手续费：</span><em>{{ orderDetails.sale_price }}</em>
      </p>

      <p v-if="orderDetails.delivery_status == 20">
        <span>物流单号：</span><em>{{ orderDetails.express_no }}</em>
      </p>
      <p v-if="orderDetails.delivery_status == 20">
        <span>物流公司：</span><em>{{ orderDetails.express_company }}</em>
      </p>
      <p v-if="orderDetails.delivery_status == 20">
        <span>发货时间：</span><em>{{ orderDetails.delivery_time }}</em>
      </p>
      <p v-if="orderDetails.receipt_status == 20">
        <span>收货时间：</span><em>{{ orderDetails.receipt_time }}</em>
      </p>

      <p>
        <span>支付方式：</span
        ><em>{{ orderDetails.pay_type == 10 ? "支付宝" : "支付宝" }}</em>
      </p>
      <p v-if="orderDetails.pay_time">
        <span>付款时间：</span><em>{{ orderDetails.pay_time }}</em>
      </p>
    </div>
    <div class="sureBtn">
      <!--  -->
      <van-button
        v-if="
          orderDetails.order_status == 10 &&
            orderDetails.pay_status == 20 &&
            orderDetails.delivery_status == 20 &&
            orderDetails.receipt_status == 10
        "
        color="#07c160"
        @click="sureOk"
        size="small"
        >确认收货</van-button
      >
      <van-button
        color="salmon"
        size="small"
        @click="goPay"
        v-if="orderDetails.order_status == 10 && orderDetails.pay_status == 10"
        >去付款
      </van-button>
      <van-button
        type="warning"
        size="small"
        @click="consignment"
        v-if="
          orderDetails.order_status == 10 &&
            orderDetails.pay_status == 20 &&
            orderDetails.delivery_status == 10 &&
            orderDetails.sale_status == 10
        "
        >寄售</van-button
      >
      <van-button type="default" @click="goBack" size="small">返回</van-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon, Button, Notify } from "vant";
Vue.use(Icon).use(Button);

import apiMar from "@/api/api";
export default {
  components: {},
  data() {
    return {
      orderDetails: {},
      seller: {},
      buyer: {},
      address: {},
      imgDate: {},
      orderBg: "bg1",
      iconVal: ""
    };
  },
  computed: {},
  watch: {},
  methods: {
    goBack() {
      this.$router.push({
        path: "/order"
      });
    },
    goPay() {
      let params = {
        id: this.$route.query.id
      };
      apiMar
        .payment(params)
        .then(res => {
          window.location.href = res;
          console.log(res, "去付款");
          // 方法二
          // const div = document.createElement("div");
          // div.innerHTML = res;
          // document.body.appendChild(div);
          // document.forms[0].submit(); //重要，这个才是点击跳页面的核心
        })
        .catch(err => {
          // this.$Message.error(err)
        });
    },
    consignment() {
      let params = {
        id: this.$route.query.id
      };
      apiMar
        .consignment(params)
        .then(res => {
          window.location.href = res;
          // 方法二
          // const div = document.createElement("div");
          // div.innerHTML = res;
          // document.body.appendChild(div);
          // document.forms[0].submit(); //重要，这个才是点击跳页面的核心
        })
        .catch(err => {
          // this.$Message.error(err)
        });
    },
    getData() {
      let params = {
        id: this.$route.query.id
        // current: this.pageData.current,
        // pageSize: this.pageData.pageSize
      };
      apiMar
        .orderDetails(params)
        .then(res => {
          console.log(res, "订单详情");
          this.orderDetails = res;
          this.seller = this.orderDetails.seller;
          this.buyer = this.orderDetails.buyer;
          this.address = this.orderDetails.address;
          this.imgDate = this.orderDetails.image;
          if (this.orderDetails.state_text == "待付款") {
            this.orderBg = "bg1";
            this.iconVal = "cash-on-deliver";
          } else if (this.orderDetails.state_text == "待发货") {
            this.orderBg = "bg2";
            this.iconVal = "send-gift-o";
          } else if (this.orderDetails.state_text == "待收货") {
            this.orderBg = "bg3";
            this.iconVal = "logistics";
          } else if (this.orderDetails.state_text == "交易完成") {
            this.orderBg = "bg4";
            this.iconVal = "checked";
          } else {
            this.orderBg = "bg5";
            this.iconVal = "close";
          }
        })
        .catch(err => {
          // this.$Message.error(err)
        });
    },
    sureOk() {
      let params = {
        id: this.$route.query.id
      };
      apiMar
        .receipt(params)
        .then(res => {
          Notify({ type: "success", message: "确认收货成功。" });
        })
        .catch(err => {
          // this.$Message.error(err)
        });
    }
  },
  created() {
    this.getData();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.sureBtn {
  width: 100%;
  height: 60px;
  background: #fff;
  border-top: 1px #eee solid;
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 20px;
  flex-direction: row-reverse;
  box-sizing: border-box;

  > * {
    margin-left: 10px;
  }
}

.detailsData {
  padding: 16px 16px 70px;

  p {
    display: flex;
    flex-direction: row;
    line-height: 1.6;
    font-size: 14px;

    span {
      width: 90px;
      color: #666;
    }

    em {
      flex: 1;
      font-style: normal;
      color: #999;
    }
  }
}

.addressBox {
  padding: 16px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px #eee solid;

  .addressIcon {
    width: 10%;
    margin-top: 8px;
  }

  .address {
    width: 90%;

    span {
      display: block;
      font-size: 14px;
      color: #666;
      line-height: 1.4;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
      width: 100%;

      em {
        font-style: normal;
        display: inline-block;
        margin-left: 4px;
      }
    }

    span.sp1 {
      color: #999;
    }
  }
}

.orderDetails {
  padding-bottom: 100px;

  .orderTop {
    height: 100px;

    .orderStatus {
      color: #fff;
      display: flex;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        vertical-align: 2px;
        display: inline-block;
        margin-left: 5px;
      }
    }

    .statusBtn {
      text-align: center;
      margin-top: 20px;

      span {
        display: inline-block;
        border: 1px #fff solid;
        border-radius: 30px;
        padding: 2px 8px;
        color: #fff;
        margin-left: 4px;
      }
    }
  }
}

.box {
  box-sizing: border-box;

  margin: 0 auto 0;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);

  padding: 16px 0;

  .box1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px #eee solid;
    padding-bottom: 4px;
    padding: 0 16px 4px;

    .title {
      font-size: 14px;
      color: #333;
    }

    .orderStatus {
      color: #999;

      span {
        display: inline-block;
        vertical-align: 3px;
        margin-right: 2px;
      }
    }
  }

  .box2 {
    display: flex;
    flex-direction: row;
    margin-top: 6px;
    padding: 0 16px;

    .boxImg {
      width: 72px;
      height: 90px;

      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }

    .boxText {
      flex: 1;
      padding-left: 16px;

      p {
        margin-top: 6px;
        line-height: 1.4;
      }

      p.p1 {
        font-size: 14px;
        color: rgba(136, 148, 162, 1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      p.p2 {
        font-size: 12px;
        color: #666;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      p.p3 {
        font-size: 12px;
        text-align: right;
        margin-top: 10px;
        color: rgba(136, 148, 162, 1);

        span {
          font-size: 14px;
          color: #333;
          font-weight: bold;
        }
      }
    }
  }

  .box3 {
    border-top: 1px #eee solid;
    margin-top: 6px;
    padding-top: 6px;
    text-align: right;

    span {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 30px;
      padding: 2px 8px;
      color: #999;
      margin-left: 4px;
    }

    span.red {
      border: 1px #ee0a24 solid;
      color: #ee0a24;
    }
  }
}

.bg1 {
  background: salmon;
}

.bg2 {
  background: rgb(222, 236, 139);
}

.bg3 {
  background: rgb(205, 230, 63);
}

.bg4 {
  background: #07c160;
}

.bg5 {
  background: #ee0a24;
}
</style>
